<template>
  <div class="min-h-screen bg-gray-50 p-8">

    <div class="mx-auto max-w-6xl bg-white rounded-lg shadow-sm">
      <div class="p-6">
        <div class="max-w-md mx-auto py-12">
          <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900">数学学習支援システム</h2>
          </div>
          <form class="space-y-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">ユーザー</label>
              <input type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-custom focus:border-custom"
                placeholder="ユーザー名" v-model="userName" />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">パスワード</label>
              <input type="password"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-custom focus:border-custom"
                placeholder="パスワード" v-model="passWord" />
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
              </div>
            </div>
            <div>
              <div
              style="cursor: pointer;"
                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-custom hover:bg-custom/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom"
                @click="sub">ログイン</div>
              <div style="margin-top: 1rem;cursor: pointer;"
                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-custom hover:bg-custom/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom"
                @click="reg">登录</div>

            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios.js"

import Cookies from 'js-cookie'
export default {
  name: 'LoginSystem',
  data() {
    return {
      userName: '',
      passWord: ''
    }
  },
  mounted() {

  },
  methods: {
    async reg() {
      if (this.userName === '' || this.passWord === '') {
        this.$notify({
          title: '警告',
          text: 'ユーザー名やパスワードを空にすることはログインできません',
          type: 'error', // 可以是 "success", "info", "warning", "error"
          duration: 800 // 通知持续时间，单位毫秒
        })
        return
      }
      await post("/register", { userName: this.userName, passWord: this.passWord }).then(async e => {
        if (e.data.code === 'success') {
          Cookies.set('token', e.data.data, { expires: 7 })
          await this.sub()
        } else {
          this.$notify({
            title: '警告',
            text: e.data.message,
            type: 'warning', // 可以是 "success", "info", "warning", "error"
            duration: 800 // 通知持续时间，单位毫秒
          })
        }
      }).catch(e => {
        this.$notify({
          title: '警告',
          text: "error",
          type: 'warning', // 可以是 "success", "info", "warning", "error"
          duration: 800 // 通知持续时间，单位毫秒
        })
      }
      )
    },
    async sub() {
      //请实现登录请求，请求参数userName和passWord,返回格式为{code:success,data:{token:xxx}
      //如果登录成功，将token保存到cookie中，并重定向home页面
      //如果登录失败，提示错误信息
      //校验用户名和密码是否为空

      if (this.userName === '' || this.passWord === '') {
        this.$notify({
          title: '警告',
          text: 'ユーザー名やパスワードを空にすることはログインできません',
          type: 'error', // 可以是 "success", "info", "warning", "error"
          duration: 800 // 通知持续时间，单位毫秒
        })
        return
      }

      post('/login', { userName: this.userName, passWord: this.passWord }).then(async res => {
        if (res.data.code === 'success') {
          Cookies.set('token', res.data.data, { expires: 7 })
          this.$router.replace({ path: '/' })
        } else {
          this.$notify({
            title: '警告',
            text: res.data.message,
            type: 'warning', // 可以是 "success", "info", "warning", "error"
            duration: 800 // 通知持续时间，单位毫秒
          })
        }
      }).catch(e => {
        this.$notify({
          title: '警告',
          text: "error",
          type: 'warning', // 可以是 "success", "info", "warning", "error"
          duration: 800 // 通知持续时间，单位毫秒
        })
      })
    }
  }
}
</script>

<style scoped>
/* Add any necessary styles here */
</style>
